<template>
  <fieldset>
    <el-form ref="fruitRules" :model="user" :rules="rules" label-width="80px" class="demo-ruleForm"
             style="width: 600px">

      <el-form-item label="名称" prop="userName">
        <el-input v-model="user.userName"></el-input>
      </el-form-item>

      <!--      <el-form-item label="uid" prop="uid">-->
      <!--        <el-input v-model.number="user.uid"></el-input>-->
      <!--      </el-form-item>-->

      <el-form-item label="密码" prop="password">
        <el-input v-model="user.password"></el-input>
      </el-form-item>

      <el-form-item label="手机号" prop="phone" @change="getRent">
        <el-input v-model="user.phone"></el-input>
      </el-form-item>

      <!--      <el-form-item label="租户名" prop="tid">-->
      <!--        <el-input v-model="user.tid"></el-input>-->
      <!--      </el-form-item>-->
      <el-form-item label="所属租户" prop="phone">
        <el-select v-model="this.user.tid" placeholder="请选择租户" @change="changeGame">
          <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.id"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit()">立即创建</el-button>
        <el-button type="warning" v-on:click="oncancel()">取消</el-button>
      </el-form-item>

    </el-form>
  </fieldset>
</template>

<script>
import request from "@/util/request";
import router from "@/router";
import {ElMessage} from "element-plus";

export default {
  name: "Register",
  data() {
    return {
      options: [],
      user: {
        userName: '',
        uid: '',
        password: '',
        phone: '',
        tid: '',
      },
      rules: {
        // userName: [
        //   {required: true, message: '请输入姓名', trigger: 'blur'}
        // ],
        // phone: [
        //   {required: true, message: '请输入密码', trigger: 'blur'},
        //   {type: 'number', message: '销量必须为数字值'}
        // ],
        // uid: [
        //   {required: true, message: '请输入uid', trigger: 'blur'},
        //   {type: 'number', message: 'uid必须为数字值'}
        // ],
        // tid: [
        //   {required: true, message: '请输入tid', trigger: 'blur'},
        //   {type: 'number', message: 'tid必须为数字值'}
        // ],
      }
    }
  },
  methods: {
    changeGame() {
      this.$forceUpdate()
    },
    getRent() {
      request.post('http://localhost:8090/tenant/showTenant/').then(response => {
        this.options = []
        response.data.data.forEach(rent => {
          this.options.push({id: rent.tid})
        })
      })
    },
    onSubmit() {
      //+ this.user.userName + '/' + this.user.uid + '/' + this.user.password + '/' + this.user.phone + '/' + this.user.tid
      request.post('http://localhost:8090/user/addUser/', {
        userName: this.user.userName,
        password: this.user.password,
        phone: this.user.phone,
        tid: this.user.tid,
        uid: 1
      }).then(response => {
        console.log(response)
        if (response.data.code === "200") {
          ElMessage({
            showClose: true,
            message: '恭喜你，创建成功',
            type: 'success'
          })
          setTimeout(() => {
            router.push('/')
          }, 3000)
        } else {
          ElMessage.error('创建失败,用户名已存在')
          this.user.userName = ''
        }
      })
    },
    oncancel() {
      router.push('/')
    }
  },
}
</script>

<style scoped>
fieldset {
  /* 表单页面居中，宽度50% ,legend颜色设置，legend圆角*/
  border: 2px solid #DCDFE6;
  text-align: left;
  border-radius: 8px;
  margin: 0 auto;
  width: 35%;
}
</style>